<template>
  <div class="app-container flex">
    <div class="left-card">
      <!-- 国控空气数据 -->
      <div class="left-card-air-info flex column">
        <div class="common-info-title flex align-center justify-between">
          <div class="left-context">
            <span class="serial-number">01</span>
            <span class="context">国控空气数据</span>
          </div>
          <div class="right-context">{{ airInfo.temp || '暂无' }}° {{ airInfo.text || '暂无' }}</div>
        </div>

        <div class="info-content-wrap f1 flex column">
          <div class="common-info flex">
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/dingwei.png" alt="" />
              <span class="lable">当前定位:</span>
              <span class="value">{{ place || '暂无' }}</span>
            </div>
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/kongqizhiliang.png" alt="" />
              <span class="lable">空气质量:</span>
              <span class="value">{{ airInfo.category || '暂无' }}</span>
            </div>
          </div>
          <div class="common-info flex">
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/PM10.png" alt="" />
              <span class="lable">颗粒物PM10:</span>
              <span class="value">{{ airInfo.pm10 || '暂无' }}</span>
            </div>
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/pm2.png" alt="" />
              <span class="lable">细颗粒物PM2.5:</span>
              <span class="value">{{ airInfo.pm2p5 || '暂无' }}</span>
            </div>
          </div>
          <div class="common-info flex">
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/eryanghuatan.png" alt="" />
              <span class="lable">二氧化氮NO2:</span>
              <span class="value">{{ airInfo.no2 || '暂无' }}</span>
            </div>
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/eryanghualiu.png" alt="" />
              <span class="lable">二氧化硫SO2:</span>
              <span class="value">{{ airInfo.so2 || '暂无' }}</span>
            </div>
          </div>
          <div class="common-info flex">
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/yiyanghuatan.png" alt="" />
              <span class="lable">一氧化碳CO:</span>
              <span class="value">{{ airInfo.co || '暂无' }}</span>
            </div>
            <div class="f1 flex align-center">
              <img src="@/assets/imgs/dashboard/chouyang.png" alt="" />
              <span class="lable">臭氧O3:</span>
              <span class="value">{{ airInfo.o3 || '暂无' }}</span>
            </div>
          </div>
        </div>
        <span class="left-top-svg"></span>
        <span class="right-top-svg"></span>
        <span class="left-bot-svg"></span>
        <span class="right-bot-svg"></span>
      </div>

      <!-- 设备状态统计 -->
      <div class="left-card-device-status flex column">
        <div class="common-info-title flex align-center justify-between">
          <div class="left-context">
            <span class="serial-number">02</span>
            <span class="context">设备状态统计</span>
          </div>
          <div class="right-context">单位/组</div>
        </div>

        <div class="info-wrap f1 flex">
          <div class="left-chart-wrap flex align-center justify-center">
            <div class="chart-outline flex">
              <dv-active-ring-chart :config="deviceStatusConfig" class="f1" />
            </div>
          </div>
          <div class="right-deive-info-wrap flex column">
            <div class="device-count flex align-center">
              <div class="icon flex align-center justify-center">
                <div class="sub-icon"></div>
              </div>
              <div class="lable">设备组总数：</div>
              <div class="value">{{ deviceStatusCount || '暂无' }}</div>
            </div>
            <div class="device-context f1 flex column cursor">
              <div class="f1 flex cus-row">
                <div class="f1 flex column cus-column" @click="deviceHandle('1', 1)">
                  <div class="device-content flex align-center">
                    <div class="device-icon"></div>
                    <div class="device-lable">正常设备组多少</div>
                  </div>
                  <div class="device-num f1">{{ deviceStatusMap.normalCount }}</div>
                </div>
                <div class="f1 flex column cus-column" @click="deviceHandle(null, 3)">
                  <div class="device-content flex align-center">
                    <div class="device-icon" style="background: #fdff0e"></div>
                    <div class="device-lable">预警设备组</div>
                  </div>
                  <div class="device-num" style="color: #fdff0e">
                    {{ deviceStatusMap.earlyWarningCount }}
                  </div>
                </div>
              </div>
              <div class="f1 flex cus-row">
                <div class="f1 flex column cus-column" @click="deviceHandle(null, 4)">
                  <div class="device-content flex align-center">
                    <div class="device-icon" style="background: #cc094e"></div>
                    <div class="device-lable">告警设备组</div>
                  </div>
                  <div class="device-num" style="color: #cc094e">
                    {{ deviceStatusMap.giveAnAlarmCount }}
                  </div>
                </div>
                <div class="f1 flex column cus-column" @click="deviceHandle('0', 2)">
                  <div class="device-content flex align-center">
                    <div class="device-icon" style="background: #00898e"></div>
                    <div class="device-lable">离线设备组</div>
                  </div>
                  <div class="device-num" style="color: #00898e">
                    {{ deviceStatusMap.offLineCount }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span class="left-top-svg"></span>
        <span class="right-top-svg"></span>
        <span class="left-bot-svg"></span>
        <span class="right-bot-svg"></span>
      </div>

      <div class="left-card-data-v">
        <!-- <div class="common-info-title flex align-center justify-between">
          <div class="left-context">
            <span class="serial-number">03</span>
            <span class="context">告警次数最多餐厅TOP10(次)</span>
          </div>
        </div> -->
        <!-- <dv-scroll-ranking-board
          class="data-v"
          :config="giveAnAlarmRestaurantListConfig"
          style="padding: 0.1rem; color: #000"
        /> -->

        <div class="device-wraming">
          <div class="common-info-title flex align-center justify-between">
            <div class="left-context">
              <span class="serial-number">03</span>
              <span class="context">设备报警</span>
            </div>
            <div class="right-context">(单位:mg/m³)</div>
          </div>

          <div class="info-container" id="review_box">
            <vueSeamlessScroll :data="alertDeviceList" :class-option="{ hoverStop: true }">
              <div
                :key="index"
                @click="alertHandle(item)"
                v-for="(item, index) in alertDeviceList"
                class="common-wrap flex column justify-between cursor"
              >
                <div>
                  <span class="identification-common" :class="getDynamicClass(item.type)">
                    {{ item.type == 1 ? '设备预警' : item.type == 2 ? '设备告警' : '设备离线' }}
                  </span>
                  <span class="restaurantName">{{ item.restaurantName }}</span>
                </div>
                <div>
                  <span class="label">
                    颗粒物浓度:
                    <span class="value" :class="getDynamicClass('', item.particleHazeType)">
                      {{ item.particleHaze }}
                    </span>
                  </span>
                  <span class="label m-14">
                    油烟浓度:
                    <span class="value" :class="getDynamicClass('', item.thickSmokeType)">{{ item.thickSmoke }}</span>
                  </span>
                  <span class="label">
                    非甲烷总烃浓度:
                    <span class="value" :class="getDynamicClass('', item.nonMethaneType)">{{ item.nonMethane }}</span>
                  </span>
                </div>
                <div class="flex align-center justify-between">
                  <span class="label">
                    设备MN码:
                    <span class="value value-normal">{{ item.deviceMonitorMn }}</span>
                  </span>
                  <span class="label" style="color: #006f73">{{ item.alarmTime }}</span>
                </div>
              </div>
            </vueSeamlessScroll>
          </div>

          <span class="left-top-svg"></span>
          <span class="right-top-svg"></span>
          <span class="left-bot-svg"></span>
          <span class="right-bot-svg"></span>
        </div>
      </div>
    </div>

    <div class="mid-card flex">
      <div class="common f1 flex">
        <img src="@/assets/imgs/dashboard/quanbu.png" alt="" class="cursor" @click="getRestaurantLatitude()" />
        <div class="context flex column justify-around">
          <div class="lable">全部餐厅/家</div>
          <div class="num">{{ restaurantTypeMap.allCount }}</div>
        </div>
      </div>
      <div class="common f1 flex">
        <img src="@/assets/imgs/dashboard/zhengchang.png" alt="" class="cursor" @click="getRestaurantLatitude(1)" />
        <div class="context flex column justify-around">
          <div class="lable">正常餐厅/家</div>
          <div class="num">{{ restaurantTypeMap.normalCount }}</div>
        </div>
      </div>
      <div class="common f1 flex">
        <img src="@/assets/imgs/dashboard/yujing.png" alt="" class="cursor" @click="getRestaurantLatitude(3)" />
        <div class="context flex column justify-around">
          <div class="lable">预警餐厅/家</div>
          <div class="num">{{ restaurantTypeMap.earlyWarningCount }}</div>
        </div>
      </div>
      <div class="common f1 flex">
        <img src="@/assets/imgs/dashboard/gaojing.png" alt="" class="cursor" @click="getRestaurantLatitude(4)" />
        <div class="context flex column justify-around">
          <div class="lable">告警餐厅/家</div>
          <div class="num">{{ restaurantTypeMap.giveAnAlarmCount }}</div>
        </div>
      </div>
      <div class="common f1 flex">
        <img src="@/assets/imgs/dashboard/lixian.png" alt="" class="cursor" @click="getRestaurantLatitude(2)" />
        <div class="context flex column justify-around">
          <div class="lable">离线餐厅/家</div>
          <div class="num">{{ restaurantTypeMap.offLineCount }}</div>
        </div>
      </div>
    </div>

    <div class="right-card">
      <!-- 设备安装统计 -->
      <div class="device-count flex column">
        <div class="common-info-title flex align-center justify-between">
          <div class="left-context">
            <span class="serial-number">04</span>
            <span class="context">油烟监测仪安装情况统计</span>
          </div>
          <div class="right-context">(单位:家)</div>
        </div>

        <div class="count-wrap f1 flex column align-center justify-around">
          <div class="count-row flex align-center">
            <div class="mount flex column justify-around align-center">
              <div class="percent">
                {{
                  calculatePercentage(
                    restaurantDeviceInstallMap.businessInstalledCount,
                    restaurantDeviceInstallMap.businessAllCount,
                  )
                }}%
              </div>
              <div class="name">安装率</div>
            </div>

            <div class="count flex">
              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num">{{ restaurantDeviceInstallMap.businessAllCount }}</div>
                <div class="column-name">商业餐饮总数</div>
              </div>

              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num mount-num">{{ restaurantDeviceInstallMap.businessInstalledCount }}</div>
                <div class="column-name">已安装监测仪</div>
              </div>

              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num unmount-num">{{ restaurantDeviceInstallMap.businessNotCount }}</div>
                <div class="column-name">未安装监测仪</div>
              </div>
            </div>
          </div>

          <div class="count-row flex align-center">
            <div class="mount flex column justify-around align-center">
              <div class="percent">
                {{
                  calculatePercentage(
                    restaurantDeviceInstallMap.unitInstalledCount,
                    restaurantDeviceInstallMap.unitAllCount,
                  )
                }}%
              </div>
              <div class="name">安装率</div>
            </div>

            <div class="count flex">
              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num">{{ restaurantDeviceInstallMap.unitAllCount }}</div>
                <div class="column-name">单位食堂总数</div>
              </div>

              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num mount-num">{{ restaurantDeviceInstallMap.unitInstalledCount }}</div>
                <div class="column-name">已安装监测仪</div>
              </div>

              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num unmount-num">{{ restaurantDeviceInstallMap.unitNotCount }}</div>
                <div class="column-name">未安装监测仪</div>
              </div>
            </div>
          </div>

          <div class="count-row flex align-center">
            <div class="mount flex column justify-around align-center">
              <div class="percent">
                {{
                  calculatePercentage(
                    restaurantDeviceInstallMap.canteenInstalledCount,
                    restaurantDeviceInstallMap.canteenAllCount,
                  )
                }}%
              </div>
              <div class="name">安装率</div>
            </div>

            <div class="count flex">
              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num">{{ restaurantDeviceInstallMap.canteenAllCount }}</div>
                <div class="column-name">学校食堂总数</div>
              </div>

              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num mount-num">{{ restaurantDeviceInstallMap.canteenInstalledCount }}</div>
                <div class="column-name">已安装监测仪</div>
              </div>

              <div class="all-count f1 flex flex column justify-around align-center">
                <div class="all-num unmount-num">{{ restaurantDeviceInstallMap.canteenNotCount }}</div>
                <div class="column-name">未安装监测仪</div>
              </div>
            </div>
          </div>
        </div>

        <span class="left-top-svg"></span>
        <span class="right-top-svg"></span>
        <span class="left-bot-svg"></span>
        <span class="right-bot-svg"></span>
      </div>

      <div class="workorder flex column">
        <div class="common-info-title flex align-center justify-between">
          <div class="left-context">
            <span class="serial-number">05</span>
            <span class="context">动态等级</span>
          </div>
          <dropdown @option-selected="handleOptionSelected"></dropdown>
          <div class="right-context">(单位:件)</div>
        </div>

        <!-- <e-charts :options="orderData" className="orderData" class="f1" @echartName="echartName"></e-charts> -->

        <div class="grade-wrap f1 flex align-center justify-around">
          <div class="grade">
            <img src="@/assets/imgs/dashboard/aaa.png" />
            <div class="grade-name">A级-良好</div>
            <div class="num">{{ evaluateTask.A }}</div>
          </div>

          <div class="grade">
            <img src="@/assets/imgs/dashboard/bbb.png" />
            <div class="grade-name bname">B级-中级</div>
            <div class="num bnum bname">{{ evaluateTask.B }}</div>
          </div>

          <div class="grade">
            <img src="@/assets/imgs/dashboard/ccc.png" />
            <div class="grade-name cname">C级-一般</div>
            <div class="num cnum cname">{{ evaluateTask.C }}</div>
          </div>
        </div>

        <span class="left-top-svg"></span>
        <span class="right-top-svg"></span>
        <span class="left-bot-svg"></span>
        <span class="right-bot-svg"></span>
      </div>

      <div class="rinse-count flex column">
        <div class="common-info-title flex align-center justify-between">
          <div class="left-context">
            <span class="serial-number">06</span>
            <span class="context">餐厅清洗统计</span>
          </div>
          <div class="right-context">(单位:家)</div>
        </div>

        <div class="chart-wrap f1 flex">
          <div class="f1 flex cursor" @click="resCountHandle(1)">
            <e-charts :options="res1" className="res1" class="f1"></e-charts>
            <div class="f1 flex column justify-around right-content">
              <div class="flex column">
                <div class="lable flex align-center">
                  <div class="icon flex align-center justify-center">
                    <div class="sub-icon"></div>
                  </div>
                  <div class="lable f1 text-right">已清洗餐厅</div>
                </div>
                <div class="value text-right">{{ restaurantCleanMap.cleanCount }}</div>
              </div>
              <div class="">
                <div class="lable text-right">占比</div>
                <div class="value text-right">
                  {{ +((restaurantCleanMap.cleanCount / restaurantCleanCount) * 100).toFixed(1) || 0 }}%
                </div>
              </div>
            </div>
          </div>
          <div class="f1 flex cursor" @click="resCountHandle(2)">
            <e-charts :options="res2" className="res2" class="f1"></e-charts>
            <div class="f1 flex column justify-around right-content">
              <div class="flex column">
                <div class="lable flex align-center">
                  <div class="icon flex align-center justify-center">
                    <div class="sub-icon"></div>
                  </div>
                  <div class="lable f1 text-right">逾期未清洗</div>
                </div>
                <div class="value text-right">{{ restaurantCleanMap.expireCount }}</div>
              </div>
              <div class="">
                <div class="lable text-right">占比</div>
                <div class="value text-right">
                  {{ +((restaurantCleanMap.expireCount / restaurantCleanCount) * 100).toFixed(1) || 0 }}%
                </div>
              </div>
            </div>
          </div>
        </div>

        <span class="left-top-svg"></span>
        <span class="right-top-svg"></span>
        <span class="left-bot-svg"></span>
        <span class="right-bot-svg"></span>
      </div>

      <div class="industry flex column">
        <div class="common-info-title flex align-center justify-between spacer">
          <div class="left-context">
            <span class="serial-number">07</span>
            <span class="context">行业动态</span>
          </div>
          <div class="right-context cursor" @click="jump_publish">查看全部></div>
        </div>

        <div class="scroll-wrapper">
          <vueSeamlessScroll :data="articleList" :class-option="{ hoverStop: true }">
            <div
              class="row flex cursor"
              v-for="(item, index) in articleList"
              :key="index"
              @click="jump_publish(item.id)"
            >
              <div class="f1 text-overflow">{{ item.title }}</div>
              <div class="dataTime">{{ item.updateTime }}</div>
            </div>
          </vueSeamlessScroll>
        </div>

        <span class="left-top-svg"></span>
        <span class="right-top-svg"></span>
        <span class="left-bot-svg"></span>
        <span class="right-bot-svg"></span>
      </div>
    </div>

    <div id="container"></div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import axios from 'axios'
import eCharts from '@/components/eCharts'
import { orderData, res1, res2 } from './echartsData'
import Dropdown from './dropdown.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Analytics',
  components: { eCharts, Dropdown, vueSeamlessScroll },
  data() {
    return {
      place: '',
      airInfo: {}, // * 天气数据
      deviceStatusMap: {}, //	 *	设备状态统计
      deviceStatusConfig: {},
      deviceStatusCount: 0,
      giveAnAlarmRestaurantListConfig: {}, //	*	告警餐厅

      alertDeviceList: [], //	* 备报警信息

      restaurantTypeMap: [], // *	餐厅类型数量统计

      orderData: {}, //	* 工单统计

      restaurantCleanMap: {}, // * 餐厅清洗记录
      restaurantCleanCount: 0,
      res1: {},
      res2: {},

      markerList: [],
      deviceInfo: {}, // 用来存储查询到的设备信息 用以解决不能直接传mn问题的变量

      cartoonFlag: false, // 04 设备报警 动画是否暂停
      restaurantDeviceInstallMap: {},
      evaluateTask: {},
      articleList: [],
    }
  },
  async mounted() {
    this.initMap()
    this.getCityInfo()
    await this.initData()
    this.getRestaurantLatitude() // * 获取地图餐馆信息

    this.addGeoLisener()
    this.noticeMessage()
  },

  methods: {
    skipto(config) {
      console.log('config', config)
      console.log('ceil', config.ceil)
      console.log('hang', config.rowIndex)
      this.$message.success('查看详情成功，可在控制台查看打印的数据')
    },

    calculatePercentage(installedCount, allCount) {
      if (allCount === 0 || installedCount === 0) {
        return 0
      }
      return ((installedCount / allCount) * 100).toFixed(0)
    },

    async handleOptionSelected(time) {
      console.log('Selected option:', time)

      let { result } = await getAction('/sys/home/restaurant_evaluate_check_task', { time })
      this.evaluateTask = result
    },

    async noticeMessage() {
      let {
        result: { records },
      } = await getAction('/sys/notice_message/page', { pageSize: 99999 })
      this.articleList = records
    },

    //初始化地图
    initMap() {
      let { unitLat, unitLng } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      let imageLayer = new AMap.ImageLayer({
        url: require('@/assets/imgs/system/in-map.png'),
        bounds: new AMap.Bounds([108.926427, 34.335836], [108.953408, 34.352016]),
        zooms: [4, 18],
      })
      //创建地图
      this.map = new AMap.Map('container', {
        // center: [ 109.010228, 34.254513], //设置中心点
        center: [unitLat, unitLng], //设置中心点
        // center: [this.$store.getters.userInfo.lng, this.$store.getters.userInfo.lat]
        resizeEnable: true, //是否监控地图容器尺寸变化
        features: ['bg', 'road', 'point', 'building'], //隐藏默认楼块
        mapStyle: 'amap://styles/0cea50aec7aabe139f917a8dc0be07af', //设置地图的显示样式
        zoom: 12,
        zooms: [4, 18],
        expandZoomRange: true, //  zooms的最大级别在PC上可以扩大到20级 移动端还是高清19/非高清20
        doubleClickZoom: false,
        dragEnable: true,
        zoomEnable: true,
        // layers: [new AMap.TileLayer(), imageLayer],
      })
    },

    addMarker(params) {
      // 创建一个 Marker 实例：
      let a = require('@/assets/imgs/dashboard/a.png')
      let b = require('@/assets/imgs/dashboard/b.png')
      let c = require('@/assets/imgs/dashboard/c.png')
      let d = require('@/assets/imgs/dashboard/d.png')
      let e, f

      if (params.status == 1) (e = a), (f = 'astyle')
      else if (params.status == 2) (e = d), (f = 'dstyle')
      else if (params.status == 3) (e = b), (f = 'bstyle')
      else if ((params.status = 4)) (e = c), (f = 'cstyle')

      let content = `<div class="flex align-center marker text-overflow ${f}" style="max-width:160px"><img src="${e}" id="img"></img>
      ${params.restaurantName || ''}</div>`

      let marker = new AMap.Marker({
        content: content, // 自定义点标记覆盖物内容
        position: new AMap.LngLat(params.lng, params.lat),
      })

      this.map.add(marker)

      marker.on('click', (e) => {
        this.markerClick(params)
      })

      this.markerList.push(marker)

      // AMap.event.addListener(marker, 'click', () => {
      //   infoWindow.open(this.map, marker.getPosition())
      // })
    },

    async markerClick(params) {
      let { result } = await getAction('/restaurant/detail', { restaurantId: params.restaurantId })

      let {
        result: { records },
      } = await getAction('/device/page', {
        restaurantId: params.restaurantId,
        unitId: result.unitId,
        pageSize: 99999,
        column: 'status',
        order: 'desc',
      })
      // status: 'desc',
      this.restaurantInfo = records
      let a = ''
      let src = require('@/assets/imgs/dashboard/infowindow-z.png')
      if (records.length == 0) {
        a += `<div class="common f1 flex align-center justify-center"><img src="${src}">`
        a += `</div>`
        this.openWindow(result, a)
        return
      }
      for (let i = 0; i < records.length; i++) {
        a += `<div class="common">`
        a += `<div class="title flex justify-between">`
        a += `<div class="left">`
        a += `<span class="identification-common ${
          records[i].status == 1
            ? 'identification-normal'
            : records[i].status == 2
            ? 'identification-offline'
            : records[i].status == 3
            ? 'identification-earlyWarning'
            : 'identification-warming'
        }">${records[i].status_dictText}</span>`
        a += `<span class="label">`
        a += `MN号:`
        a += `<span class="num">${records[i].monitorMn}</span>`
        a += `</span>`
        a += `<span class="name">${records[i].name}</span>`
        a += `</div>`
        a += `<div class="right" onclick="jumpTargetPage(${records[i].id})">查看详情></div>`
        a += `</div>`

        a += `<div class="table-wrap">`
        a += `<div class="content">`
        a += ` <div class="a">油烟浓度</div>`
        a += `<div class="b">颗粒物浓度</div>`
        a += `<div class="c">非甲烷总烃</div>`
        a += `<div class="d">净化器</div>`
        a += `<div class="e">排风机</div>`
        a += `</div>`
        a += `<div class="content">`
        a += `<div class="a">${records[i].thickSmoke}mg/m³</div>`
        a += `<div class="b">${records[i].particleHaze}mg/m³</div>`
        a += `<div class="c">${records[i].nonMethane}mg/m³</div>`
        a += `<div class="d ${records[i].purifyStatus == 1 ? 'on' : 'off'}">${
          records[i].purifyStatus == 1 ? '开启' : '关闭'
        }</div>`
        a += `<div class="e ${records[i].fanStatus == 1 ? 'on' : 'off'}">${
          records[i].fanStatus == 1 ? '开启' : '关闭'
        }</div>`
        a += `</div>`
        a += `</div>`
        a += `</div>`
      }
      this.openWindow(result, a)
    },

    openWindow(params, a) {
      console.log(params, 'params')
      let x = require('@/assets/imgs/dashboard/x.png')
      // let day =
      //   this.$moment(params.expireCleanTime).diff(this.$moment().format('YYYY-MM-DD HH:mm:ss'), 'days') || '暂无'

      let content = `
      <div class="infoWindow flex column">
      <div class="infoWindow-title text-overflow" style="max-width: 480px;padding:0 40px;">${
        params.restaurantName || '暂无'
      }</div>

      <div class="info-winwow-content">
        <div class="flex" style="margin-bottom: 16px">
          <div class="f1 flex">
            <div class="lable">所属街道:</div>
            <div class="value text-overflow">${params.regionName || '暂无'}</div>
          </div>

          <div class="f1 flex">
            <div class="lable">监管单位:</div>
            <div class="value text-overflow">${params.unitName || '暂无'}</div>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 16px">
          <div class="f1 flex">
            <div class="lable">负责人姓名:</div>
            <div class="value text-overflow">${params.chargeName || '暂无'}</div>
          </div>

          <div class="f1 flex">
            <div class="lable">负责人电话:</div>
            <div class="value text-overflow">${params.chargePhone || '暂无'}</div>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 16px">
          <div class="f1 flex">
            <div class="lable">清洗周期:</div>
            <div class="value text-overflow">${params.cleanCycle || '暂无'}天</div>
          </div>

          <div class="f1 flex">
            <div class="lable">清洗倒计时:</div>
            <div class="value text-overflow">${params.expireDay}天</div>
          </div>
        </div>

        <div class="flex">
          <div class="lable">营业地址:</div>
          <div class="value text-overflow">${params.detailAddress || '暂无'}</div>
        </div>
      </div>
      <div class="transition"></div>

      <div class="device-detail f1 flex column">
      `

      content =
        content +
        a +
        `</div>
    </div>`

      // 信息窗体的内容
      var winContent = `<div class="yykj-map-dialog"><img id="close-x" onclick="close_x()" src="${x}" />${content}</div>`
      // 创建 infoWindow 实例
      let infoWindow = new AMap.InfoWindow({
        isCustom: true,
        // offset: [0, -20],
        content: winContent, //传入 dom 对象，或者 html 字符串
      })
      // 打开信息窗体
      infoWindow.open(this.map, [params.lng, params.lat])
      window.close_x = () => {
        this.map.clearInfoWindow()
      }

      window.jumpTargetPage = (id) => {
        for (const key in this.restaurantInfo) {
          if (this.restaurantInfo[key].id == id) {
            // console.log(this.restaurantInfo[key], this.restaurantInfo[key].monitorMn, id, '111')
            this.$router.push({ path: '/device/index', query: { monitorMn: this.restaurantInfo[key].monitorMn } })
          }
        }
      }
    },

    addGeoLisener() {
      //地图的移动与缩放事件
      AMap.event.addListener(this.map, 'dragend', () => {
        this.onMoveEnd()
      })

      AMap.event.addListener(this.map, 'zoomstart', () => {
        // console.log('zoomstart')
      })

      AMap.event.addListener(this.map, 'zoomend', () => {
        // console.log('zoomend')
      })

      AMap.event.addListener(this.map, 'zoomchange', this.onZoomEnd)
    },

    // jumpTargetPage() {
    //   console.log('jumpTargetPage')
    // },

    onMoveEnd() {
      this.logMapBounds()
      // let orgType = this.computedOrgType(this.map.getZoom())
      // if (!this.isZoom) {
      //   return
      // }
      // let lnglat = this.logMapBounds()
      // let queryParams
      // if (this.selectCircleId === undefined) {
      //   queryParams = {
      //     orgType: this.currentOrgType,
      //     leftLongitude: lnglat[0].lng,
      //     leftLatitude: lnglat[0].lat,
      //     rightLongitude: lnglat[1].lng,
      //     rightLatitude: lnglat[1].lat,
      //   }
      // } else {
      //   queryParams = {
      //     orgType: this.currentOrgType,
      //     leftLongitude: lnglat[0].lng,
      //     leftLatitude: lnglat[0].lat,
      //     rightLongitude: lnglat[1].lng,
      //     rightLatitude: lnglat[1].lat,
      //     firstFacilitiesId: this.selectCircleId,
      //   }
      // }
      // queryIndexData(queryParams)
      //   .then((res) => {
      //     if (!res.result || !(res.result.length > 0)) return
      //     if (this.currentOrgType === 1) {
      //       renderMarker(res.result)
      //     } else if (this.currentOrgType === 4) {
      //       renderDeviceMarker(res.result)
      //     } else {
      //       renderStreetMarker(res.result)
      //     }
      //     this.isZoom = true
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },

    onZoomEnd() {
      let zoom = this.map.getZoom()

      // if (zoom < 13) this.map.remove(this.markerList)
      // else this.getRestaurantLatitude()

      // 12 qu xian

      // 9 shi

      // 7 sheng
      // if (!this.isZoom) {
      //   return
      // }

      // let orgType
      // let zoom
      // let orgTypeAndZoom = this.computedOrgtypeAndZoom()
      // zoom = orgTypeAndZoom[0]
      // orgType = orgTypeAndZoom[1]

      // //如果是最后一级并且用户进行了放大就不在进行请求数据
      // if (!(this.map.getZoom() > this.currentZoom && this.currentOrgType === 4)) {
      //   this.currentOrgType = orgType
      //   if (this.currentOrgType < 2) {
      //     this.map.remove(borderList)
      //   }
      // }
      // let lnglat = logMapBounds()
      // let queryParams
      // if (this.selectCircleId === undefined) {
      //   queryParams = {
      //     orgType: this.currentOrgType,
      //     leftLongitude: lnglat[0].lng,
      //     leftLatitude: lnglat[0].lat,
      //     rightLongitude: lnglat[1].lng,
      //     rightLatitude: lnglat[1].lat,
      //   }
      // } else {
      //   queryParams = {
      //     orgType: this.currentOrgType,
      //     leftLongitude: lnglat[0].lng,
      //     leftLatitude: lnglat[0].lat,
      //     rightLongitude: lnglat[1].lng,
      //     rightLatitude: lnglat[1].lat,
      //     firstFacilitiesId: this.selectCircleId,
      //   }
      // }
      // queryIndexData(queryParams)
      //   .then((res) => {
      //     if (!res.result || !(res.result.length > 0)) return
      //     if (this.currentOrgType === 1) {
      //       renderMarker(res.result)
      //     } else if (this.currentOrgType === 4) {
      //       renderDeviceMarker(res.result)
      //     } else {
      //       renderStreetMarker(res.result)
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },

    // 地图缩放值与层级互相转化
    getZoom() {
      let zoom
      if (this.orgType === '1') {
        zoom = 9
      } else if (this.orgType === '2') {
        zoom = 14
      } else if (this.orgType === '3') {
        zoom = 16
      } else if (this.orgType === '4') {
        zoom = 18
      }
      return zoom
    },

    computedOrgType() {
      let orgType
      if (zoom >= 9 && zoom < 14) {
        //市下面的区或县
        // console.log('去获取区县的数据')
        orgType = 1
      } else if (zoom >= 14 && zoom < 16) {
        orgType = 2
      } else if (zoom >= 16 && zoom <= 17) {
        orgType = 3
      } else if (zoom >= 18) {
        orgType = 4
      }
      return orgType
    },

    // 获取当前地图边界经纬度
    logMapBounds() {
      let bounds = this.map.getBounds()
      // console.log(bounds.southwest, bounds.northeast)
      return [
        { lng: bounds.southwest.lng, lat: bounds.southwest.lat },
        { lng: bounds.northeast.lng, lat: bounds.northeast.lat },
      ]
    },

    getDynamicClass(type, status) {
      if (type == 1) return 'identification-earlyWarning'
      else if (type == 2) return 'identification-warming'
      else if (type == 3) return 'identification-offline'

      if (status == 1) return 'value-normal'
      else if (status == 2) return 'value-earlyWarning'
      else if (status == 3) return 'value-warming'
    },

    // * 空气质量
    async getCityInfo() {
      let { unitLat, unitLng } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      let position = [unitLat, unitLng] //位置的经纬度
      let geocoder = new AMap.Geocoder({})
      geocoder.getAddress(position, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.place = result.regeocode.addressComponent.district
        }
      })

      let { data } = await axios.get(
        `https://devapi.qweather.com/v7/air/now?location=${unitLat},${unitLng}&key=ca992c29d62b4b73a493fe4622a86d17`,
      )

      let res = await axios.get(
        `https://devapi.qweather.com/v7/weather/now?location=${unitLat},${unitLng}&key=ca992c29d62b4b73a493fe4622a86d17`,
      )

      this.airInfo = { ...data.now, ...res.data.now }
    },

    async initData() {
      let {
        result: {
          deviceStatusMap,
          // giveAnAlarmRestaurantList,
          alertDeviceList,
          // workOrderStatisticsMap,
          restaurantDeviceInstallMap,
          restaurantCleanMap,
          restaurantTypeMap,
        },
      } = await getAction('/sys/home/statistics')

      this.alertDeviceList = alertDeviceList.splice(0, 20)
      this.deviceStatusMap = deviceStatusMap
      this.restaurantCleanMap = restaurantCleanMap
      this.restaurantTypeMap = restaurantTypeMap
      this.restaurantDeviceInstallMap = restaurantDeviceInstallMap

      // * 设备状态统计
      let cusEnum = {
        normalCount: '正常占比',
        offLineCount: '离线占比',
        giveAnAlarmCount: '告警占比',
        earlyWarningCount: '预警占比',
      }

      let data = []
      for (const key in deviceStatusMap) {
        let temp = { name: cusEnum[key], value: deviceStatusMap[key] }
        data.push(temp)
        this.deviceStatusCount += Number(deviceStatusMap[key])
      }
      this.deviceStatusConfig = {
        data,
        radius: '80%',
        activeRadius: '70%',
        lineWidth: 18,
        activeTimeGap: 2000,
        color: ['#fe0258', '#dfeb43', '#00ce4f', '#11817e'],
        digitalFlopStyle: {
          fontSize: 25,
          fill: '#01b9bf',
        },
      }

      // //	*	告警餐厅
      // if (giveAnAlarmRestaurantList.length == 0) {
      //   this.appealPoliceCountList = { data: [{ name: '暂无', value: 0 }] }
      // } else {
      //   let data = []
      //   giveAnAlarmRestaurantList.forEach((item) => {
      //     let obj = {}
      //     obj.name = item.restaurantName
      //     obj.value = item.giveAnAlarmCount
      //     data.push(obj)
      //   })

      //   this.giveAnAlarmRestaurantListConfig = { data, waitTime: 3000, rowNum: 6 }
      // }

      // // * 工单统计
      // this.orderData = orderData(workOrderStatisticsMap)

      // * 餐厅清洗统计
      this.res1 = res1(restaurantCleanMap.cleanCount)
      this.res2 = res2(restaurantCleanMap.expireCount)
      this.restaurantCleanCount = restaurantCleanMap.cleanCount + restaurantCleanMap.expireCount
    },

    async getRestaurantLatitude(status = '') {
      let { result } = await getAction('/sys/home/restaurant_latitude', { status })
      this.map.remove(this.markerList)
      result.forEach((item) => {
        this.addMarker(item)
      })
    },

    deviceHandle(v, s) {
      if (v == 1 || v == 0) {
        this.$router.push({ path: '../device/index', query: { monitorStatus: v, status: s } })
      } else {
        this.$router.push({ path: '../device/index', query: { status: s } })
      }
    },

    alertHandle(item) {
      this.$router.push({
        path: '../event/event/index',
        query: { active: item.type, activeKey: item.type, restaurantName: item.restaurantName },
      })
    },

    resCountHandle(num) {
      this.$router.push({
        path: '../rinse/index',
        query: { activeKey: num },
      })
    },

    echartName(name) {
      var activeKey
      if (name == '待处理') {
        activeKey = 1
      } else if (name == '已处理') {
        activeKey = 2
      } else if (name == '已回执') {
        activeKey = 3
      }

      this.$router.push({
        path: '../event/workorder/index',
        query: { active: activeKey },
      })
    },

    jump_publish(id) {
      if (typeof id == 'string') {
        this.$router.push({ path: '/publish/index', query: { id } })
      } else {
        this.$router.push({ path: '/publish/index' })
      }
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
.app-container {
  padding: 0 0.1rem;
  position: relative;
  background: #003433;

  #container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .left-card,
  .right-card,
  .mid-card {
    z-index: 9;
  }

  .left-top-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.08rem;
    height: 0.02rem;
    background: url('~@/assets/imgs/dashboard/svg.png');
  }
  .right-top-svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.08rem;
    height: 0.02rem;
    background: url('~@/assets/imgs/dashboard/svg.png');
  }
  .left-bot-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0.08rem;
    height: 0.02rem;
    background: url('~@/assets/imgs/dashboard/svg.png');
  }
  .right-bot-svg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.08rem;
    height: 0.02rem;
    background: url('~@/assets/imgs/dashboard/svg.png');
  }

  .common-info-title {
    height: 0.32rem;
    padding: 0 0.13rem;
    font-weight: 400;
    min-height: 0.32rem;
    font-size: 0.14rem;
    background: rgba(0, 248, 255, 0.1);
    .serial-number {
      padding: 0 0.05rem;
      font-size: 0.16rem;
      color: #023335;
      font-family: Acens;
      background: #00f8ff;
    }
    .context {
      margin-left: 0.08rem;
      font-family: FZZhengHeiS-R-GB;
      color: #00f8ff;
    }
    .right-context {
      font-family: PingFang SC;
      color: #00f8ff;
    }
  }

  // .dv-scroll-ranking-board .ranking-info .rank
  /deep/ .row-item {
    height: 0.52rem !important;
  }
  /deep/ .ranking-info {
    font-size: 0.14rem;
    font-weight: 500;
    color: #03eef1;
    .rank {
      font-size: 0.16rem;
      line-height: 0.16rem;
      color: #03eef1;
      font-family: DIN-Medium, DIN;
    }
    .info-name {
      flex: auto;
      width: 3.2rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ranking-value {
      font-size: 0.16rem;
      font-family: DIN-Medium, DIN;
      font-weight: 500;
      color: #03fbfe;
    }
  }

  /deep/ .ranking-column {
    border-bottom: 2px solid #00a6ab;
    .inside-column {
      background: rgba(3, 251, 254, 0.6);
      .shine {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        background: radial-gradient(#00f8ff 5%, transparent 80%);
        -webkit-animation: shine 3s ease-in-out infinite alternate;
        animation: shine 3s ease-in-out infinite alternate;
      }
    }
  }

  /deep/ .active-ring-name {
    font-size: 0.18rem !important;
    font-family: DIN;
    font-weight: 500;
    color: #03fbfe;
    line-height: 0.16rem !important;
  }

  .icon {
    width: 0.13rem;
    height: 0.13rem;
    margin-right: 0.05rem;
    border: 1px solid #048486;
    .sub-icon {
      width: 0.05rem;
      height: 0.05rem;
      background: #03e7ea;
    }
  }

  .left-card {
    width: 430px;
    .left-card-air-info {
      height: 2.04rem;
      position: relative;
      background: rgba(3, 96, 100, 0.9);

      .common-info-title {
        background: rgba(0, 248, 255, 0.1);
      }

      .info-content-wrap {
        padding: 0.12rem;
        .common-info {
          height: 0.3rem;
          font-size: 0.14rem;
          font-weight: 400;
          margin-bottom: 0.08rem;
          &:last-child {
            margin-bottom: 0;
          }
          div {
            background: rgba(2, 49, 51, 0.4);
            &:nth-child(2) {
              margin-left: 10px;
            }
          }

          .lable {
            color: #00a6ab;
            margin: 0 0.05rem;
          }
          .value {
            color: #00a6ab;
          }
        }
      }
    }

    .left-card-device-status {
      height: 2.2rem;
      margin: 0.1rem 0;
      position: relative;
      background: rgba(2, 48, 50, 0.9);

      .left-chart-wrap {
        flex: 4;
        .chart-outline {
          width: 1.5rem;
          height: 1.5rem;
          border: 1px solid #036372;
          border-radius: 50%;
        }
      }
      .right-deive-info-wrap {
        flex: 6;
        .device-count {
          height: 0.44rem;
          border-bottom: 1px solid #014b4c;

          .lable {
            font-size: 0.14rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #00a6ab;
          }
          .value {
            font-size: 0.22rem;
            font-family: DIN;
            font-weight: 700;
            color: #03fbfe;
          }
        }

        .device-context {
          padding: 0.08rem 0.06rem 0.08rem 0;
          .cus-row {
            margin-bottom: 0.12rem;
            &:last-child {
              margin-bottom: 0;
            }
            .cus-column {
              margin-right: 0.1rem;
              padding: 0.08rem 0.06rem;
              background: rgba(0, 119, 122, 0.2);
              &:nth-child(2n) {
                margin-right: 0;
              }

              .device-content {
                line-height: 0.12rem;
                margin-bottom: 0.06rem;
                .device-icon {
                  width: 0.06rem;
                  height: 0.06rem;
                  background: #00d544;
                }
                .device-lable {
                  margin-left: 0.05rem;
                  font-size: 0.12rem;
                  font-weight: 400;
                  color: #00a6ab;
                }
              }
              .device-num {
                font-size: 0.24rem;
                font-family: DIN;
                font-weight: 500;
                color: #00d544;
                line-height: 0.24rem;
                padding-left: 0.12rem;
              }
            }
          }
        }
      }
    }

    .left-card-data-v {
      height: 4.1rem;
      background: #023133;

      // .data-v {
      //   height: 3.8rem;
      // }

      .device-wraming {
        height: 4.04rem;
        position: relative;
        background: #023234;

        .info-container {
          height: calc(100% - 40px);
          overflow: hidden;
          .common-wrap {
            height: 0.9rem;
            margin: 0 0.1rem;
            padding: 0.1rem 0;
            border-bottom: 1px solid rgba(0, 119, 122, 0.2);

            .identification-common {
              padding: 0 0.04rem;
              font-size: 0.14rem;
              font-weight: 500;
              color: #023133;
              line-height: 0.14rem;
            }

            .identification-normal {
              background: #00d544;
            }

            .identification-earlyWarning {
              background: #fff601;
            }

            .identification-warming {
              background: #ff0054;
            }

            .identification-offline {
              background: #006f73;
            }

            .restaurantName {
              font-size: 0.14rem;
              font-weight: 500;
              color: #00f8ff;
              line-height: 0.14rem;
              margin-left: 0.08rem;
            }

            .label {
              font-size: 0.14rem;
              color: #00898e;
              line-height: 0.14rem;
            }
            .value {
              height: 0.14rem;
              font-size: 0.14rem;
              font-family: DIN-Medium;
            }

            .value-earlyWarning {
              color: #fff601;
            }

            .value-warming {
              color: #ff0054;
            }

            .value-normal {
              color: #00f9ff;
            }
            .m-14 {
              margin: 0 0.14rem;
            }
          }
        }
      }
    }
  }

  .mid-card {
    flex: 1;
    height: 88px;
    margin: 0 10px 10px 10px;
    padding: 20px;
    background: rgba(2, 48, 50, 0.84);
    .common {
      justify-content: center;
      img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
      }
      .lable {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #00c6cc;
        line-height: 14px;
      }
      .num {
        font-size: 0.24rem;
        font-family: DIN;
        font-weight: 700;
        color: #00f8ff;
        line-height: 0.24rem;
      }
    }
  }

  .right-card {
    width: 430px;

    .device-count {
      height: 2.6rem;
      position: relative;
      background: #023234;

      .count-wrap {
        .count-row {
          .mount {
            width: 73px;
            height: 73px;
            padding: 20px 0;
            background: url('~@/assets/imgs/dashboard/device_count.png');
            background-size: 100% 100%;

            .percent {
              font-size: 0.16rem;
              font-weight: bold;
              color: #00ff63;
            }
            .name {
              font-size: 12px;
              font-weight: 500;
              color: #00c6cc;
            }
          }

          .count {
            width: 3.14rem;
            height: 0.6rem;
            border-radius: 0px 0.3rem 0.3rem 0px;
            background: linear-gradient(90deg, rgba(2, 51, 53, 0.4) 0%, rgba(0, 248, 255, 0.3) 100%);
            padding: 0.1rem 0;

            .all-count {
              font-size: 0.12rem;
              font-weight: 500;
              color: #00c6cc;

              border-right: 2px solid;
              border-image: linear-gradient(to bottom, #024548, #024d4f, #016c6f, #015c5f, #024c4e) 1;
              &:nth-child(2) {
                border: none;
              }
              &:nth-child(3) {
                border: none;
              }

              .all-num {
                font-size: 0.2rem;
                font-family: DIN;
                font-weight: 500;
                color: #00f8ff;
              }

              .mount-num {
                color: #00d544;
              }
              .unmount-num {
                color: #fff601;
              }
            }
          }
        }
      }
    }
    .workorder {
      height: 1.8rem;
      position: relative;
      background: #023234;
      margin: 0.1rem 0;

      .grade {
        img {
          width: 0.56rem;
          height: 0.56rem;
        }

        .grade-name {
          font-size: 0.14rem;
          font-weight: 400;
          color: #00ec5b;
          margin: 0.1rem 0;
        }
        .num {
          font-size: 0.16rem;
          font-weight: bold;
          color: #00ec5b;
          width: 0.73rem;
          height: 0.26rem;
          text-align: center;
          background: url('~@/assets/imgs/dashboard/aa.png');
          background-size: 100% 100%;
        }

        .bname {
          color: #fff601;
        }
        .bnum {
          background: url('~@/assets/imgs/dashboard/bb.png');
          background-size: 100% 100%;
        }

        .cname {
          color: #f23124;
        }
        .cnum {
          background: url('~@/assets/imgs/dashboard/cc.png');
          background-size: 100% 100%;
        }
      }
    }

    .rinse-count {
      height: 1.92rem;
      position: relative;
      background: #023234;

      .right-content {
        padding: 0.16rem 0.16rem 0.16rem 0;
      }

      .lable {
        font-size: 0.14rem;
        font-weight: 500;
        color: #028d91;
      }

      .value {
        font-size: 0.2rem;
        font-family: Acens;
        font-weight: 400;
        color: #03fbfe;
      }
    }

    .industry {
      height: 1.9rem;
      position: relative;
      background: #023234;
      margin-top: 0.1rem;
      .scroll-wrapper {
        height: 1.58rem;
        overflow: hidden;
      }

      .row {
        flex-shrink: 0;
        height: 0.4rem;
        line-height: 0.4rem;
        background: #00414b;
        padding: 0 0.16rem;

        color: #03fbfe;
        font-weight: 400;
        font-size: 0.14rem;

        .dataTime {
          font-size: 0.12rem;
          color: #02a8ac;
        }

        &:nth-child(even) {
          background: #023133;
        }
      }
    }
  }
}
</style>
<style lang="less">
.marker {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

#img {
  /* transform: translateX(-50%); */
  /* position: relative;
  left: -10%; */
}

.astyle {
  color: #00ff48;
  background: rgba(0, 124, 35, 0.4);
}

.bstyle {
  color: #fff601;
  background: rgba(137, 132, 1, 0.4);
}
.cstyle {
  color: #ff0054;
  background: #41142a;
  // background: rgba(110, 5, 42, 0.5);
}
.dstyle {
  color: #ffffff;
  background: rgba(0, 111, 115, 0.2);
}
</style>

<style lang="less">
marquee {
  position: relative;
  overflow: hidden;
  // div {
  //   position: absolute;
  //   // z-index: 99;
  //   top: 360px;
  //   // left: 0;
  // }
}
</style>
